<template>
	<view class="card">
		<view class="u-flex u-row-between card-box" @click="jumpCourse">
			<view ><image class="card-box-img" :src="item.imgUrl" mode="aspectFit"></image></view>
			<view class="u-flex-1 u-m-l-15">
				<view class="">
					<view class="card-box-title"><text v-if="item.lessonLable">【{{item.lessonLable}}】</text>{{item.lessonName}}</view>
				</view>
				<view class="u-m-t-20">
					<view class="card-box-footer u-flex u-row-between">
						<view class="u-flex">
							<image v-for="index in 5" :key="index" :src="`../../static/home/star${index <= item.starScore ? '-full' :'' }@2x.png`" style="width: 18rpx;" mode="widthFix"></image>
						</view>
						<view> <u-icon name="eye-fill" size="24" :label="item.broadcastNumber || 0" label-size="24" label-color="#8C8C8C" /></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			item: {
				type: Object,
				default: {}
			}
		},
		methods: {
			jumpCourse() {
				uni.navigateTo({
					url: '../../pages/course/detail/detail?id='+this.item.lessonId
				})
			}
		}
	}
</script>

<style>
	.card-box{
		padding: 24rpx;
		background: #FFFFFF;
		/* border-radius: 16rpx; */
		margin-bottom: 24rpx;
		border-bottom: 1px solid #E8E8E8;
	}
	.card-box-img{
		width: 210rpx;
		height: 130rpx;
	}
	.card-box-title{
		color: $default-font-color;
		font-size: 28rpx;
		line-height: 36rpx;
		font-weight: bold;
		max-height: 108rpx;
		overflow: hidden;
		text-overflow: ellipse;
		display:-webkit-box;
	}
	.card-box-account{
		font-size: 22rpx;
		color: #BFBFBF;
	}
	.card-box-footer{
		font-size: 24rpx;
		color: #8C8C8C;
	}
</style>
